<template>
	<view class="solve">
		<u-navbar
			back-text="查看解决方案"
			:back-text-style="{
				color: '#101010',
				fontSize: '32rpx'
			}"
			:background="{
				background: 'transparent'
			}"
			:border-bottom="false"
		></u-navbar>
		<view class="header u-flex u-row-left u-col-top">
			<view class="widget">Q</view>
			<view class="text" style="font-size: 26rpx;">{{ info.title }}</view>
		</view>
		<u-line color="rgba(0, 0, 0, 0.08)" margin="14rpx 0"></u-line>
		<view class="conent u-flex u-row-left u-col-top">
			<view class="widget">A</view>
			<view class="text u-flex-1">{{ info.problem }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'solve',
	data() {
		return {
			id: '',
			info: {
				title: '',
				problem: ''
			}
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		console.log(option);
		this.id = option.id;
		this.getProblemDetail();
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getProblemDetail() {
			this.$u.api
				.getProblemDetail({
					id: this.id
				})
				.then(res => {
					console.log(res);
					this.info = res.data;
				})
				.catch(err => {
					conosle.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.solve {
	.widget {
		width: 48rpx;
		height: 48rpx;
		background-color: rgba(187, 187, 187, 0.24);
		border: 2rpx solid rgba(187, 187, 187, 0.86);
		color: rgba(187, 187, 187, 0.98);
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		border-radius: 100%;
		margin-right: 26rpx;
	}
	.text{
		color: #101010;
		font-size: 28rpx;
		font-weight: 600;
	}
	.header {
		padding: 0 22rpx;
		
	}
	.conent{
		
		padding: 0 22rpx;
	}
}
</style>
